<template>
    <div id='right1'>
        <p class="p1">常见问题</p>
        <div v-for="(item, index) in info" :key="index">
            <p class="p2">
                <span>{{ item.title }}</span>
                <span class="span2" @click="changeVisible(index, item.flag)">{{ item.flag ? '十' : '一' }}</span>
            </p>
            <p class="p3" v-if="item.flag">{{ item.content }}</p>
        </div>
    </div>
    <div id="right2">
        <p class="p1">找不到您想要结果？</p>
        <div class="box1">
            <div class="box11">
                <div class="icon1">
                    <span class="iconfont icon-dianhua"></span>
                </div>
                <p class="p11">致电我们</p>
                <p>需要帮助？立即致电我们，我们随时为您提供服务。</p>
            </div>
            <div class="box11">
                <div class="icon1">
                    <span class="iconfont icon-iconfontzhizuobiaozhun023133"></span>
                </div>
                <p class="p11">在线咨询</p>
                <p>需要快速解答吗？我们随时为您提供实时帮助。</p>
            </div>
            <div class="box11">
                <div class="icon1">
                    <span class="iconfont icon-youjian_o"></span>
                </div>
                <p class="p11">给我们发邮件</p>
                <p>有疑问吗？通过电子邮件联系我们，我们会快速回复。</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
const visible = ref(null);
const info = reactive([
    {
        title: '什么是POS应用程序？ ',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: 'POS系统与传统收银收什么不同？',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: 'POS应用程序可以获取客户支持吗？',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: '我的POS系统需要互联网连接才能工作吗？',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: '我的数据在POS应用程序中安全吗？',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
])
const changeVisible = (e, flag) => {
    console.log(e, flag);
    visible.value = e
    info.forEach(ele => {
        ele.flag = false
    })
    info[e].flag = !flag

}
</script>
<style scoped lang="less">
#right1 {
    width: 100%;
    min-height: 40vh;
    background-color: #fff;
    border-radius: 2vh;


    .p1{
        padding: 5vh 1.5vh;
        padding-bottom: 2vh;
        font-size: 3vh;
        font-weight: 600;
    }

    .p2 {
        font-size: 2vh;
        padding: 1.5vh;
        display: flex;
        justify-content: space-between;

        .span2 {
            font-size: 2vh;
        }
    }

    .p3 {
        font-size: 1.5vh;
        padding-left: 1.5vh;
        padding-right: 1.5vh;
        color: #636566;

    }
}

#right2 {
    margin-top: 2vh;
    margin-bottom: 2vh;
    width: 100%;
    min-height: 33vh;
    background-color: #fff;
    border-radius: 2vh;
    box-sizing: border-box;

    .p1 {
        font-size: 3vh;
        padding: 3.5vh 1.5vh;
        box-sizing: border-box;
    }

    .box1 {
        width: 100%;
        height: 20vh;
        padding: 0 1.5vh;
        display: flex;
        justify-content: space-between;
        .box11 {
            width: 32%;
            height: 100%;
            border: 1px solid #ccc;
            border-radius: 2vh;
            padding: 2vh;
            .icon1{
                width: 5vh;
                height: 5vh;
                background-color: #F0F8FF;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20%;
            }
            .p11{
                font-size: 2vh;
                font-weight: 600;
            }
        }
    }
}
</style>